<template>
  <div id="member-management" class="container">
    <div class="return-button">
      <el-button type="text" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
    </div>
    <!-- 搜索框 -->
    <div class="search-box">
      <el-input placeholder="请输入姓名或电话进行搜索" v-model="searchQuery" @input="handleSearch">
        <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
      </el-input>
    </div>
    <div class="table-container">
      <el-table class="custom-table" :data="pagedMemberList" style="width: 100%" row-key="id">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="name" width="120" label="姓名"></el-table-column>
        <el-table-column prop="gender" width="120" label="性别"></el-table-column>
        <el-table-column prop="birthday" width="180" label="生日"></el-table-column>
        <el-table-column prop="phone" width="120" label="电话"></el-table-column>
        <el-table-column prop="registerDate" width="180" label="注册日期"></el-table-column>
        <el-table-column prop="cardType" label="卡种" width="120"></el-table-column>
        <el-table-column prop="expiryDate" label="到期时间" width="180"></el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0, // 从后端获取总数
      memberList: [], // 从后端获取的数据
      searchQuery: '', // 搜索关键词
      filteredMemberList: [], // 过滤后的列表
    };
  },
  computed: {
    pagedMemberList() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredMemberList.slice(start, end);
    },
  },
  created() {
    this.fetchMembers();
  },
  methods: {
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1; // 重置当前页为第一页
      this.fetchMembers();
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.fetchMembers();
    },
    goBack() {
      this.$router.push('/member');
    },
    handleSearch() {
      if (this.searchQuery) {
        this.filteredMemberList = this.memberList.filter(member =>
          member.name.includes(this.searchQuery) || member.phone.includes(this.searchQuery)
        );
      } else {
        this.filteredMemberList = [...this.memberList]; // 清空搜索时恢复全部数据
      }
      this.currentPage = 1; // 重置当前页为第一页
    },
    fetchMembers() {
      axios.get(`/api/members?page=${this.currentPage - 1}&size=${this.pageSize}`)
        .then(response => {
          this.memberList = response.data.content;
          this.total = response.data.totalElements; // 设置总数

          // 重新应用搜索过滤
          if (this.searchQuery) {
            this.filteredMemberList = this.memberList.filter(member =>
              member.name.includes(this.searchQuery) || member.phone.includes(this.searchQuery)
            );
          } else {
            this.filteredMemberList = [...this.memberList]; // 清空搜索时恢复全部数据
          }
        })
        .catch(error => {
          console.error('获取会员列表失败:', error);
        });
    },
  },
};
</script>

<style scoped>
#member-management {
  background-color: aquamarine;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.return-button {
  position: absolute;
  top: 20px;
  right: 20px;
}

.search-box {
  position: absolute;
  top: 20px;
  right: 240px; /* 根据返回按钮的位置调整 */
}

.table-container {
  width: 100%;
  max-width: 1200px; /* Adjust this value based on your design needs */
  margin: auto;
}

.custom-table .el-table__body-wrapper {
  background-color: #e03535;
}

.custom-table .el-table__row:hover {
  background-color: #3cc46c;
}
</style>